<template>
  <div>
    <a-modal
      :visible="visiable"
      :title="t('subject-category.title.addSubjectCategory')"
      :cancelText="t('button.cancel')"
      :okText="t('button.determine')"
      width="60%"
      @ok="submit"
      @cancel="cancel"
    >
      <a-form
        ref="refForm"
        :model="modelForm"
        :rules="rules"
        :label-col="{ span: 8 }"
        :wrapperCol="{ span: 22 }"
      >
        <a-row>
          <a-col :span="12">
            <a-form-item :label="t('subject-category.label.calssName')" name="disciplineName">
              <a-input v-model:value="modelForm.disciplineName"  maxlength="50"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" v-if="ifParent">
            <a-form-item
              :label="t('subject-category.label.parentCategoryName')"
            >
              <a-input disabled v-model:value="formState.parentName" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              :label="t('subject-category.label.remark')"
              :label-col="{ span: 4 }"
            >
              <a-textarea
                v-model:value="modelForm.remark"
                placeholder="请输入内容"
                maxlength="255"
                :rows="4"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import {reactive, toRaw, ref, onUnmounted, computed } from "vue";
import { useI18n } from "vue-i18n";
import { message } from "ant-design-vue";

import {
  save,
  update,
  details
} from "@/api/module/subject-category";

export default {
  name: "school",
  props: {
    visiable: {
      type: Boolean,
      default: false
    },
    parentRow: Object,
    recodData: Object,
    itemId: [String, Number]
  },
  setup(props, content) {
    const ifParent = computed(() => {
      const data = toRaw(props.parentRow)
      if (data&&data.id) {
        return true;
      }
      return false;
    })


    const { t } = useI18n();

    const refForm = ref()

    const formState = reactive({
      subjectList: [],
      parentName: props.parentRow ? toRaw(props.parentRow).disciplineName : '',
    })

    const modelForm = reactive({
      disciplineName: '',
      parentDiscipline: props.parentRow ? toRaw(props.parentRow).id : '',
      remark: ''
    })

    const rules = {
      disciplineName: [
        {
          required: true,
          message: '请输入分类名称',
          trigger: 'blur',
        }
      ]
    }
    const getDetails = () => {
      const id = props.itemId||'';
      if (!id) return;
      return details({ id })
        .then((result) => {
          if (result.success) {
            this.modelForm = reactive({ ...result.data });
          }
        })
        .catch((err) => {
          console.log("err: ", err);
        });
    };
    const cancel = () => {
      content.emit("close", "visiableSub");
    }
    const submit = () => {
      refForm.value
        .validate().then(() => {
          const result = toRaw(modelForm);
          if (result.id) {
            update()
              .then((res) => {
                if (res.success) {
                  cancel()
                  message.success({ content: "修改成功", duration: 1 });
                } else {
                  message.warning({ content: "修改失败", duration: 1 });
                }
              })
              .catch((err) => {
                message.warning({ content: "修改失败", duration: 1 });
                console.log("err: ", err);
              });
          } else {
            save(result)
              .then((res) => {
                if (res.success) {
                  cancel()
                  message.success({ content: "保存成功", duration: 1 });
                } else {
                  message.warning({ content: "保存失败", duration: 1 });
                }
              })
              .catch((err) => {
                message.warning({ content: "保存失败", duration: 1 });
                console.log("err: ", err);
              });
          }
        })
    }
    getDetails()

    return {
      t,
      formState,
      modelForm,
      refForm,
      rules,
      cancel,
      submit,
      ifParent
    }
  }
}
</script>

<style scoped>

</style>
